<template>
	<view>
		<!-- 自定义导航 -->
		<uniNavBar :statusBar="true" rightText="发布" left-icon="arrowleft" @clickLeft="back" @clickRight="submit">
			<view class="flex-row align-item" @tap="changeLook">
				{{ publicOrPrivate }}
				<view class="ml5 icon iconfont icon-xialazhankai"></view>
			</view>
		</uniNavBar>
		<!-- 多行文本框的内容 -->
		<view class="uni-textarea">
			<textarea v-model="release" placeholder="请输入发布内容" />
		</view>
		
		<!-- 上传多图 -->
		<uploadImages @upload="upload"></uploadImages>
		
		<!-- 弹出公告 -->
		<uniPopup ref="showPopup" type="center" :maskClick="false">
			<view class="popup-container">
				<view class="flex-row">
					<image src="../../static/none/popup.png" mode="widthFix"></image>
				</view>
				<view class="mt5 flex-row" style="color: #f2b640;">
					严禁发表以下信息
				</view>
				<view class="color-333-size-14 mt5">1、涉及黄色，政治，广告及骚扰信息</view>
				<view class="color-333-size-14">2、涉及人身攻击</view>
				<view class="color-333-size-14">3、留联系方式，透露他人隐私</view>
				<view class="color-333-size-14">一经核实将被封禁，情节严重者永久封禁</view>
				<button type="primary" class="mt10" @tap="closeTap">朕知道了</button>
			</view>
		</uniPopup>
	
	</view>
</template>

<script>
	const changeLook = ['所有人可见', '仅自己可见']
	import uniNavBar from '../../components/uni-nav-bar/uni-nav-bar.vue'
	import uploadImages from '../../components/common/upload-images.vue'
	import uniPopup from '../../components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniNavBar,
			uploadImages,
			uniPopup
		},
		data() {
			return {
				isSaveDraft: false,
				publicOrPrivate: '所有人可见', // 公开还是私有
				release: '',
				imageList: [],
				showpopup: true
			}
		},
		mounted() {
			this.open()
		},
		// 点击返回按钮触发
		onBackPress() {
			if(!this.release && this.imageList.length == 0) {
				return
			}
			if(!this.isSaveDraft) {
				this.saveDraft()
				return true
			}
			// return true 用户返回不成功
		},
		methods: {
			// 返回
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			saveDraft() {
				uni.showModal({
					content: '是否保存为草稿',
					success: (res) => {
						if (res.confirm) {
								console.log('用户点击保存');
						} else if (res.cancel) {
								console.log('用户点击不保存');
						}
						this.isSaveDraft = true
						uni.navigateBack({
							delta: 1
						})
					}
				});
			},
			// 发布
			submit() {
			},
			// 是否公开
			changeLook() {
				uni.showActionSheet({
				    itemList: changeLook,
				    success: (res) => {
				      // console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
							this.publicOrPrivate = changeLook[res.tapIndex]
				    }
				});
			},
			// 上传图片
			upload(arr) {
				// console.log(arr)
				this.imageList = arr
			},
			open(){
				this.$refs.showPopup.open()
			},
			closeTap() {
				this.$refs.showPopup.close()
			}
		}
	}
</script>

<style lang="scss">
	.uni-textarea{
		height: auto;
		min-height: 260rpx;
		border-bottom: 1upx solid #f0f0f0;
	}
	.popup-container{
		width: 550upx;
		height: auto;
		padding: 30upx 60upx;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 20upx;
		image {
			width: 400upx;
			// width: 80%;
		}
		.color-333-size-14{
			line-height: 50upx;
		}
		button {
			background-color: #ffe934;
			border-color: #ffe934;
			color: #333333;
			font-size: 32upx;
		}
	}
</style>
